<template>
  <div class="yEchart" ref="e-map"></div>
</template>

<script>
export default {
  name: "yEchart",
  props: {
    options: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      echarts: null,
      resizeTimer: null,
    };
  },
  methods: {
    // 初始化及监听
    initWartch() {
      this.echarts = this.$echarts.init(this.$refs["e-map"]);
      window.addEventListener("resize", () => {
        if (!this.echarts) return;
        if (this.resizeTimer) {
          clearTimeout(this.resizeTimer);
        }
        this.resizeTimer = setTimeout(() => {
          this.echarts.resize();
        }, 400);
      });
    },
    clearWartch() {
      window.removeEventListener("resize", () => {
        if (!this.echarts) return;
        this.echarts.resize();
      });
    },
    init() {
      this.echarts.setOption(this.options);
    },
  },
  mounted() {
    this.initWartch();
  },
  beforeDestroy() {
    this.clearWartch();
  },
};
</script>

<style lang="scss" scoped>
.yEchart {
  width: 100%;
  height: 100%;
}
</style>